<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

	<link rel="stylesheet" href="${APP_PATH}/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="${APP_PATH}/css/backstage/font-awesome.min.css">
	<link rel="stylesheet" href="${APP_PATH}/css/backstage/main.css">
	<link rel="stylesheet" href="${APP_PATH}/css/backstage/doc.min.css">
	<style>
	.tree li {
        list-style-type: none;
		cursor:pointer;
	}
	</style>
  </head>

  <body class="container-fluid">
    <div class="container-fluid">
      <div class="row">
				<ol class="breadcrumb">
				  <li><a onclick="javascript:history.back(-1);">数据列表</a></li>
				  <li class="active">新增</li>
				</ol>
			<div class="panel panel-default">
              <div class="panel-heading">表单数据<div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i class="glyphicon glyphicon-question-sign"></i></div></div>
			  <div class="panel-body">
				<form role="form">
				  <div class="form-group">
					<label for="name">角色:</label>
					<input type="text" class="form-control" id="name" placeholder="请输入角色名">
				  </div>
				  <button id="insertBtn" type="button" class="btn btn-success"><i class="glyphicon glyphicon-plus"></i> 新增</button>
				  <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-refresh"></i> 重置</button>
				</form>
			  </div>
			</div>
        </div>
      </div>
    </div>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
		<div class="modal-content">
		  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
			<h4 class="modal-title" id="myModalLabel">帮助</h4>
		  </div>
		  <div class="modal-body">
			<div class="bs-callout bs-callout-info">
				<h4>测试标题1</h4>
				<p>测试内容1，测试内容1，测试内容1，测试内容1，测试内容1，测试内容1</p>
			  </div>
			<div class="bs-callout bs-callout-info">
				<h4>测试标题2</h4>
				<p>测试内容2，测试内容2，测试内容2，测试内容2，测试内容2，测试内容2</p>
			  </div>
		  </div>
		</div>
	  </div>
	</div>
    <script src="${APP_PATH}/jquery/jquery-2.1.1.min.js"></script>
    <script src="${APP_PATH}/bootstrap/js/bootstrap.min.js"></script>
	<script src="${APP_PATH}/script/docs.min.js"></script>
	<script src="${APP_PATH}/layer/layer.js"></script>
        <script type="text/javascript">
            $(function () {
			    $(".list-group-item").click(function(){
				    if ( $(this).find("ul") ) {
						$(this).toggleClass("tree-closed");
						if ( $(this).hasClass("tree-closed") ) {
							$("ul", this).hide("fast");
						} else {
							$("ul", this).show("fast");
						}
					}
				});
			    $("#insertBtn").click(function (){
			    var name = $("#name").val();
			    if (name==""){
					layer.msg("角色不能为空", {time:2000, icon:5, shift:6}, function(){
					});
					return;
				}
			    var loadingIndex = null;
			    $.ajax({
					type:"post",
					url:"${APP_PATH}/role/insert",
					data:{
						name:name,
					},
					beforeSend : function(){
						loadingIndex = layer.msg('处理中', {icon: 16});
					},
					success:function (result){
						layer.close(loadingIndex);
						if (result.success){
							layer.msg("角色信息保存成功！", {time:1000,shift:6}, function(){
								window.location.href="${APP_PATH}/goRole";
							});
						}else{
							layer.msg("角色信息保存失败，请重新操作！", {time:2000, icon:5, shift:6}, function(){
							});
						}
					}
					});
				});
            });
        </script>
  </body>
</html>
